<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head th:replace="userCommon::common-header"></head>
<body class="sb-nav-fixed">
<nav th:replace="userCommon::common-navbar"></nav>
<div id="layoutSidenav">
    <div th:replace="userCommon::common-sidenav"></div>

    <div id="layoutSidenav_content">
        <main>
            <div class="container-fluid px-4">
                <h1 class="mt-4">报名选课</h1>

                <ol class="breadcrumb mb-4">
                    <li class="breadcrumb-item"><a th:href="@{/toUserMain}">主页</a></li>
                    <li class="breadcrumb-item active">报名选课</li>
                </ol>

                <!-- 剩余课时显示组件 -->
                <div class="position-absolute top-0 end-0 mt-5 me-3" style="width: 15%; min-width: 120px; z-index: 1000;">
                    <div class="bg-light rounded p-2 shadow-sm custom-hour-component">
                        <div class="d-flex align-items-center justify-content-between">
                            <div class="d-flex align-items-center">
                                <i class="fas fa-clock mr-2"></i>
                                <span>剩余课时：</span>
                            </div>
                            <div>
                                <span class="font-weight-bold"
                                      th:text="${session.user?.cardNextClass ?: '未登录'}">0</span>
                                <span class="ms-1">小时</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 错误信息显示 - 使用SweetAlert2 -->
                <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
                <div th:if="${errorMessage != null || errorMsg != null || msg != null}">
                    <script th:inline="javascript">
                        Swal.fire({
                            icon: 'warning',
                            title: '操作提示',
                            text: /*[[${errorMessage ?: errorMsg ?: msg}]]*/ '',
                            confirmButtonColor: '#3085d6'
                        });
                    </script>
                </div>

                <div class="card mb-4">
                    <div class="card-header">
                        <i class="fas fa-table me-1"></i>
                        可选课程
                    </div>
                    <div class="card-body">
                        <table id="datatablesSimple">
                            <thead>
                            <tr>
                                <th>编号</th>
                                <th>名称</th>
                                <th>时间</th>
                                <th>时长(分钟)</th>
                                <th>教练</th>
                                <th>操作</th>
                            </tr>
                            </thead>

                            <tbody>
                            <!--<tr th:if="${classList == null || classList.isEmpty()}">
                                <td colspan="6" class="text-center text-muted">暂无可选课程</td>
                            </tr>-->
                            <tr th:each="class:${classList}">
                                <td th:text="${class.classId}">编号</td>
                                <td th:text="${class.className}">名称</td>
                                <td th:text="${class.classBegin}">时间</td>
                                <td th:text="${class.classTime}">时长（分钟）</td>
                                <td th:text="${class.coach}">教练</td>
                                <td>
                                    <form th:action="@{/user/applyClass}" method="post">
                                        <input type="hidden" th:value="${class.classId}" name="classId">
                                        <button type="submit" class="btn btn-sm btn-outline-primary">报名</button>
                                    </form>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <br><br><br><br>
        </main>
        <footer th:replace="userCommon::common-footer"></footer>
    </div>
</div>

<div th:include="userCommon::common-scripts"></div>

<script>
    // 初始化DataTables
    document.addEventListener('DOMContentLoaded', function() {
        const table = document.getElementById('datatablesSimple');
        if (table) {
            new simpleDatatables.DataTable(table);
        }
    });
</script>

</body>
</html>